<template>
  <div class="home">
    <!--索引-->
    <div class="search" @click="goSearch">
      <van-search shape="round" placeholder="请输入搜索关键词"></van-search>
    </div>
    <!--轮播图-->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in bannerList" :key="index">
          <van-image @click="goBookInfo(image.id)" fit="contain" :src="image.pic" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!--导航栏-->
    <div class="menu">
      <div class="menu-item" v-for="(item, index) in menuList" :key="index">
        <img class="menu-icon" :src="item.src" />
        <p class="menu-text">
          {{ item.text }}
        </p>
      </div>
    </div>
    <!--排行榜-->
    <div class="setion">
      <div class="setion-title">
        <div class="setion-right">
          <span class="title">排行榜</span>
          <span style="color: #c5c5c5; font-size: 12px"
            >随机为你推荐排行榜</span
          >
        </div>

        <div class="hyh">
          <span>查看更多></span>
        </div>
      </div>
      <div class="scroll-view2">
        <div @click="goBookInfo(item.id)"  class="item-bang"  v-for="(item, index) in rankBooks" :key="index">
          <img
            style="width: 55px; height: 93px"
            :src="item.pic"
          />
          <div class="info">
            <div class="left">
              <span>{{ item.bookname }}</span>
              <span style="margin-top: 10px; color: #c5c5c5; font-size: 10px">
                {{item.hit}}.0万人在读
              </span>
              <span v-if="index == 0" style="color: rgb(255, 1, 1); font-weight: bold;"><span style="font-size:10px">TOP</span>{{index+1}}</span>
              <span v-if="index == 1" style="color: rgb(255, 94, 1);font-weight: bold;"><span style="font-size:10px">TOP</span>{{index+1}}</span>
              <span v-if="index == 2" style="color: rgb(255, 196, 1);font-weight: bold;"><span style="font-size:10px">TOP</span>{{index+1}}</span>
              <span v-if="index >= 3" style="color: #c5c5c5;font-weight: bold;">{{index+1}}</span>


            </div>
          </div>
        </div>
      </div>
    </div>
    <!--好书推荐-->
    <div class="setion">
      <div class="setion-title">
        <div class="setion-right">
          <span class="title">好书推荐</span>
          <span style="color: #c5c5c5; font-size: 12px;"
            >随机为你推荐书籍</span
          >
        </div>

        <div class="hyh" @click="getRandomBook">
          <span>换一换</span><img src="@/assets/icon/hyh.png" />
        </div>
      </div>
      <div class="scroll-view">
        <div class="item"  @click="goBookInfo(item.id)" v-for="(item, index) in randomList" :key="index">
          <img  style="width: 85px; height: 123px" :src="item.pic" />
          <div class="info">
            <div class="left">
              <span style="margin-top: 10px; font-weight: bold">{{
                item.bookname
              }}</span>
              <span style="margin-top: 10px; color: #c5c5c5; font-size: 13px">{{
                item.author
              }}</span>
              <van-rate
                v-model="item.stars"
                :size="15"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                style="align-self: center; margin-top: 10px"
              />
            </div>
            <span class="right"
              >{{ item.bookTypeName }} · {{ item.stars }}分</span
            >
          </div>
        </div>
      </div>
    </div>
    <!--新书-->
    <div class="setion">
      <div class="setion-title">
        <div class="setion-right">
          <span class="title">新书</span>
          <span style="color: #c5c5c5; font-size: 12px;"
            >根据你的喜好推荐</span
          >
        </div>

        <div class="hyh">
          <span @click="goList(4)">查看更多></span>
        </div>
      </div>
      <div class="scroll-view2">
        <div class="item-bang" @click="goBookInfo(item.id)" v-for="(item, index) in newBooks" :key="index">
          <img style="width: 55px; height: 93px" :src="item.pic" />
          <div class="info">
            <div class="left">
              <span>{{ item.bookname }}</span>
              <span style="margin-top: 10px; color: #c5c5c5;">
                {{item.number}}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--完结-->
    <div class="setion" style="margin-bottom: 70px">
      <div class="setion-title">
        <div
          class="setion-right"
        >
          <span class="title">完结</span>
          <span style="color: #c5c5c5; font-size: 12px;"
            >根据你的喜好推荐</span
          >
        </div>

        <div class="hyh">
          <span @click="goList(7)">查看更多></span>
        </div>
      </div>
      <div class="view-scroll" >
        <div  class="item" @click="goBookInfo(item.id)" v-for="(item, index) in finishBooks" :key="index">
          <img style="width: 85px; height: 123px" :src="item.pic" />
          <div class="info">
            <div class="left">
              <span style="margin-top: 10px; font-weight: bold">{{
                item.bookname
              }}</span>
              <span style="margin-top: 10px; color: #c5c5c5; font-size: 13px">{{
                item.author
              }}</span>
              <van-rate
                v-model="item.stars"
                :size="15"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
                style="align-self: center; margin-top: 10px"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <Tabbar style="margin-top: 70px" />
  </div>
</template>

<script>
import bookrequst from "@/api/book";
import commrequst from "@/api/comment";
import Tabbar from "@/components/Tabbar.vue";
import Vue from "vue";
import { Search, Swipe, SwipeItem, Rate, Image as VanImage } from "vant";
Vue.use(Search);
export default {
  name: "Home",
  components: {
    Tabbar,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Rate.name]: Rate,
    [VanImage.name]: VanImage,
  },
  data() {
    return {
      menuList: [
        {
          src: require("../assets/icon/fl.png"),
          text: "分类",
          path: "/",
        },
        {
          src: require("../assets/icon/bd.png"),
          text: "榜单",
          path: "/",
        },
        {
          src: require("../assets/icon/wj.png"),
          text: "完结",
          path: "/",
        },

        {
          src: require("../assets/icon/xs.png"),
          text: "新书",
          path: "/",
        },
      ],
      rankBooks:[],
      randomList: [],
      bannerList: [],
      newBooks:[],
      finishBooks:[]
    };
  },
  created() {
    this.getRandomBook();
    this.getBannerBook();
    this.getTypeBooks(4)
     this.getTypeBooks(7)
    this.getRankBook() 

  },
  methods: {
    goList(id) {
      this.$router.push({
        path:"/booklist",
        query: {
          typeId: id
        }
      });
    },
    goBookInfo(id) {
      this.$router.push({
        path:"/bookinfo",
        query: {
          bookId: id,
        },
      });
    },
    goSearch() {
      this.$router.push("/search");
    },
    getRandomBook() {
      bookrequst.randomBook().then((res) => {
        this.randomList = res.data.data
      });
    },
    getBannerBook() {
      bookrequst.bannerBook().then((res) => {
        this.bannerList = res.data.data.bookList
        console.log(res.data.data.bookList)
      });
    },
    getTypeBooks(typeId) {
      bookrequst.typeBooks(typeId).then(res=>{
        if(typeId == 4){
          this.newBooks = res.data.data.bookList.slice(0,4)
        }else if(typeId == 7)
         this.finishBooks = res.data.data.bookList.slice(0,4)
      })
    },
    getRankBook() {
      bookrequst.bookRank().then(res=>{
        this.rankBooks = res.data.data.slice(0, 6)
      })
    },
    getCommentList() {
      commrequst.commentList(this.bookId).then((res) => {
        this.comments = res.data.data.slice(0, 4);
      });
    },
  },
};
</script>

<style scoped>
.menu {
  display: flex;
  justify-content: space-around;
  padding-top: 14px;
}
.banner {
  margin: 14px;
}
.my-swipe {
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgb(151, 150, 150);
}
.setion {
  padding: 14px;
}
.setion-title {
  display: flex;
  justify-content: space-between;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
}

.setion-right {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-weight: bold;
  align-items: flex-start;
}
.hyh {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #c9c9c9;
  
 
}
.scroll-view {
  margin-top: 10px;
  width: 100%;
  display: flex;
  overflow: auto;
  flex-direction: column;
  white-space: nowrap;
  height: 100%;
  align-content: space-around;
}
.scroll-view2 {
  width: 98%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.view-scroll {
  margin-top: 10px;
  width: 100%;
  display: flex;
  overflow: auto;
  white-space: nowrap;
  height: 100%;
  align-content: space-around;

}
.item-bang {
  flex: 1;
  width: 49%;
  max-width: 49%;
  min-width: 49%;
  display: flex;
  margin-top: 10px;
}
.item {
  display: flex;
  margin-top:10px ;
}
.info {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}
.left {
  display: flex;
  flex-direction: column;
  width: 100px;
  align-self: center;
  overflow: hidden;
  white-space: normal;
}
.right {
  align-content: center;
  color: #c5c5c5;
  font-size: 12px;
}
</style>
